<template>
  <Grid>
    <template #toolbar-buttons>
      <el-button class="ml-auto" type="primary"> 添加第三方 </el-button>
    </template>
  </Grid>
</template>

<script lang="ts" setup>
import type { RowType } from './type';

import type { VxeGridListeners } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useTable } from '#/hooks/usetable';

const { tableconfig } = useTable({
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'name', title: 'Name' },
    { field: 'age', sortable: true, title: 'Age' },
    { field: 'nickname', title: 'Nickname' },
    { field: 'role', title: 'Role' },
    { field: 'address', showOverflow: true, title: 'Address' },
  ],
  data: [
    {
      id: 1,
      name: 'John Doe',
      age: 25,
      nickname: 'Johnny',
      role: 'Admin',
      address: '123 Main St, Springfield, USA',
    },
    {
      id: 2,
      name: 'Jane Smith',
      age: 30,
      nickname: 'Janey',
      role: 'User',
      address: '456 Elm St, Springfield, USA',
    },
  ],
});

const gridEvents: VxeGridListeners<RowType> = {
  // cellClick: ({ row }) => {
  //   // console.log('Cell clicked:', row);
  // },
};

const [Grid] = useVbenVxeGrid({
  gridEvents,
  gridOptions: tableconfig.value,
});
</script>
